<template>
  <!-- <div>{{ parent_list }}</div> -->
  <div class="CommentList">
    <!-- {{ CommentList }} -->
    <!-- <div
      v-for="item in CommentList"
      :key="item"
      class="info_box"
    >{{ item.COMMENT_EVALUATEM_EVALUATE }}</div> -->
    <div class="demo-collapse">
      <el-collapse accordion v-model="activeNames">
        <el-collapse-item title="好评" name="1">
          <CommentGood :good_id="good_id" />
        </el-collapse-item>
        <el-collapse-item title="中评" name="2">
          <CommenMedium :med_id="med_id" />
        
        </el-collapse-item>
        <el-collapse-item title="差评" name="3">
          <CommentBad :bad_id="bad_id" />
         
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
    
<script setup lang="ts">
const props = defineProps<{
  city_id_list: String;
}>();
const activeNames = ref(['1'])
let good_id = ref(props.city_id_list);
let med_id = ref(props.city_id_list);
let bad_id = ref(props.city_id_list);
watch(
  () => props.city_id_list,
  (newValue, oldValue) => {
    if (newValue) {
      good_id.value = props.city_id_list;
      med_id.value = props.city_id_list;
      bad_id.value = props.city_id_list;
      // get_data(newValue);
      console.log(" comment_id.value", bad_id.value);
    }
  }
);
</script>
    
    <style lang="scss" scoped>
.CommentList {
  display: flex;
  height: 300px;
  overflow-y: scroll;
  .demo-collapse {
    width: 100%;
  }
  :deep(.el-collapse-item__header) {
    // background-color: aqua;
    height: 30px;
    border: 3px double rgb(255, 0, 0);
    font-size: 14px;
    padding-left: 10px;
    font-weight: 900;
    color: rgb(255, 0, 0);
    // padding: 0;
  }
  :deep(.el-collapse-item__content) {
    display: flex;
    flex-direction: column;
    // height: 350px;
    // overflow-y: scroll;
    padding: 0;
  }
}
</style>